<template>
    <q-avatar
      text-color="white"      
      :size="`${mySize}px`"
      class="my-toggle"
      :style="{background: myColor}"
    >
      {{myText}}
    </q-avatar>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRefs, watch, computed, PropType } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem, CDataNode } from 'stores/editorModels';
import { CFormPropertyItem } from './formViewModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { getPropValue } from 'src/util/utils'

export default defineComponent({
  name: 'ViewFormToggle',
  props: {
    detail: {
      type: Object,
      default: {} as CGraphEntity
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props, context) {
    //数据解构
    let {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CFormPropertyItem>({
      title: '',
      onColor: 'primary',
      offColor: 'grey'
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);
    let myData = ref(1);
    let myColor = computed(() => {
      if (myData.value > 0) {
        return param.value.onColor
      } else {
        return param.value.offColor
      }
    });
    let mySize = computed(() => {
      if (detail.value.position.w > detail.value.position.h) {
        return detail.value.position.h;
      } else {
        return detail.value.position.w;
      }
    });

    let myText = computed(() => {
      if (myData.value > 0) {
        return 'ON';
      } else {
        return 'OFF';
      }
    });

    //属性更新
    const configProperty = () => {
      //生成属性配置
      if ((detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        param.value.title = getPropValue('title', detail.value.propsItem);
        param.value.onColor = getPropValue('onColor', detail.value.propsItem);
        param.value.offColor = getPropValue('offColor', detail.value.propsItem);
      } else {
        showMessage('FormToggle组件属性设置错误');
      }

      //生成数据节点
      if ((detail.value?.dataItem) && (detail.value?.dataItem.length > 0)) {
        xyData.value.length = 0;
        detail.value.dataItem.forEach((item: CDataNode) => {
          xyData.value.push({
            vid: item.variableValue,
            name: item.nodeValue,
            value: 0
          });
        });
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }

      //数据
      if (xyData.value.length > 0) {
        myData.value = xyData.value[0].value;
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      param,
      myColor,
      myText,
      mySize
    };
  }
});
</script>

<style lang="scss" scoped>
.my-toggle {
  padding: 5px;

  width: 99%;
  height: 99%;
}
.brand{
  background: #000000 !important;
}
</style>
